<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">-->
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>常用元素 - layui</title>

<link rel="stylesheet" href="__PUBLIC__/build/css/layui.css">

<style>
::-webkit-scrollbar{width:0px}
body{padding: 10px;}
</style>
</head>
<body>

<!--数据统计-->
<!--<p style="width: 70%; line-height: 30px; margin-bottom: 5px;">总金额：2151 累计工作量：165 成功率：98%</p>-->
<!--/数据统计-->

<!--操作按钮-->
<div style="margin: 0 0 5px 0;font-size: 15px; height: 30px;">
    <if condition="in_array('add',$access)"><a href="add.html" class="layui-btn layui-btn-small">新增</a></if>
    <if condition="in_array('del',$access)"><button class="layui-btn layui-btn-danger layui-btn-small batch-delete">删除</button></if>
    <if condition="in_array('excel',$access)"><a href="excel.html" class="layui-btn layui-btn-normal layui-btn-small">导出EXCEL</a></if>
    <button style="float: right;margin-right: 2%;" class="layui-btn layui-btn-small layui-btn-radius search-block-switch" onclick="aaa();">展开查询</button>
</div>
<!--/操作按钮-->

<!--筛选区域-->
<form class="layui-form layui-form-pane1 condition_form" action="" style="background: #f4f4f4; padding: 10px 0 1px 0; margin: 3px 0 10px; display: none;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required|title" required placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="start_time" placeholder="开始日" id="LAY_demorange_s">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input class="layui-input" name="end_time" placeholder="截止日" id="LAY_demorange_e">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value=""></option>
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">音乐</option>
                    <option value="4">旅行</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <!--<button class="layui-btn-small layui-btn-radius">原始按钮</button>-->
                <button class="layui-btn layui-btn-small layui-btn-radius">查询</button>
            </div>
        </div>
    </div>
</form>
<!--/筛选区域-->

<!--数据列表-->
<div class="layui-form data-list">
    <form class="from-data" method="post" action="">
        <table lay-skin="nob" lay-even="" class="layui-table">
            <thead>
                <tr>
                    <th><input name="" lay-skin="primary" lay-filter="allChoose" type="checkbox"></th>
                    <volist name="titleArr" id="vo">
                        <th>{$vo}</th>
                    </volist>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </form>
    <div id="pages"></div>
</div>
<!--/数据列表-->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="__PUBLIC__/build/layui.js"></script>
<script>
    layui.use(['laypage','form'], function(){
        var $ = layui.jquery, form = layui.form();

//        console.log($('.condition_form').serializeJson());

        function func_init(){
            $('.delData').click(function () {
                var obj = $(this);
                layer.confirm('确定执行该操作？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.post('del',{pk_id:obj.attr('data-id')}, function (data) {
                        if(data.error == 0){
                            obj.parents('tr').remove();
                        }
                        layer.msg(data.msg);
                    });
                });
            });
        }

        //全选
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        //批量删除
        $('.batch-delete').click(function () {
            var param = $('.from-data').serialize();
            if(!param){
                layer.msg('请选择要删除的数据');
                return false;
            }else{
                layer.confirm('确定执行该操作？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.post('del',param, function (data) {
                        if(data.error == 0){
                            $(".data-row:checked").parents('tr').remove();
                        }
                        layer.msg(data.msg);
                    });
                });
            }
        });

        getDataList(1,10);

        //用来显示的字段
        var showField = "{$field}".split(',');
        var accessOp = '{:json_encode($access)}';
        if(accessOp !== 'null'){
            accessOp = JSON.parse(accessOp);
        }else{
            accessOp = [];
        }
        function getDataList(page,rows){
            $.get('',{page:page,rows:rows}, function (data) {
                var obj = $('.data-list tbody').empty();
                $.each(data.rows , function (key,val) {
                    //循环数据
                    var tdHtml = '<td><input class="data-row" name="pk_id[]" value="'+val['pk_id']+'" lay-skin="primary" type="checkbox"></td>',opHtml='';
                    for(fd in showField){
                        var reg= /[a-zA-Z]/g;
                        var rawData = val[showField[fd]],rawData_value;
                        if(reg.test(rawData)){  // 判断是否为字母
                            if(rawData.length > 6){
                                rawData_value = rawData.slice(0,6) + "…";
                            }else{
                                rawData_value = rawData;
                            }
                        }else{
                            rawData_value = rawData;
                        }
                        tdHtml += '<td>'+rawData_value+'</td>';
                    }
                    //循环操作
                    accessOp.indexOf('menuAuth') !== -1 ? opHtml += '<a href="access.html?pk_id='+val['pk_id']+'">权限</a> ' : '';
                    accessOp.indexOf('edit') !== -1 ? opHtml += '<a href="edit.html?pk_id='+val['pk_id']+'">编辑</a> ' : '';
                    accessOp.indexOf('del') !== -1 ? opHtml += '<a href="javascript:;" class="delData" data-id="'+val['pk_id']+'" href="del.html">删除</a> ' : '';
                    opHtml ? tdHtml += '<td>'+opHtml+'</td>' : tdHtml += '<td>暂无</td>';
                    obj.append('<tr>'+tdHtml+'</tr>');
                });
                form.render();
                func_init();
                layui.laypage({
                    cont: 'pages'
                    ,pages: Math.ceil(data.count / data.page_num)
                    ,skip: true
                    ,curr: data.page
                    ,jump: function(obj, first){
                        var curr = obj.curr;
                        if(first !== true){
                            getDataList(curr,data.page_num);
                        }
                    }
                });
            })
        }
    });
</script>
<script>
    function aaa(){
        var $ = layui.jquery;
        if($('.layui-form-pane1').css('display') == 'block'){
            $('.search-block-switch').text('展开查询');
        }else{
            $('.search-block-switch').text('收起查询');
        }
        $('.layui-form-pane1').slideToggle();
    }
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
        }
        document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this;
            laydate(end);
        }
    });
</script>

<script>
    (function($){
        $.fn.serializeJson=function(){
            var serializeObj={};
            var array=this.serializeArray();
            var str=this.serialize();
            $(array).each(function(){
                if(serializeObj[this.name]){
                    if($.isArray(serializeObj[this.name])){
                        serializeObj[this.name].push(this.value);
                    }else{
                        serializeObj[this.name]=[serializeObj[this.name],this.value];
                    }
                }else{
                    serializeObj[this.name]=this.value;
                }
            });
            return serializeObj;
        };
    })(jQuery);
</script>
</body>
</html>
